import React, { useState } from 'react';
import { SearchOutlined, PlusSquareOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
import { 
    Input, 
    Button, 
    Tooltip,
    Radio, 
    Space, 
    Table, 
    Tag,
    Modal,
    Switch,
    Form
} from 'antd';
import './memu.css'



function Menu() {
    const [top, setTop] = useState('none');
    const [bottom, setBottom] = useState('bottomCenter');
    const { confirm } = Modal;

    const [visible, setVisible] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [form] = Form.useForm();
    const [editingKey, setEditingKey] = useState('');
    const [modalModify, setModalModify] = useState(false);
    const [modifyAdd, setmodifyAdd] = useState(true)
    const [modalText, setModalText] = useState({
        ID: "",
        memuName: "",
        memuUrl: "",
        memuOrder: "",
        fatherID: "",
        sonID: ""
    })
    const [inpText, setInpText] = useState({
        ID: "",
        memuName: "",
        memuUrl: "",
        memuOrder: "",
        fatherID: "",
        sonID: ""
    })
    const xxx = (e) => {
        console.log(e);
        setInpText({
            ID: e.target.value,
            memuName: inpText.memuName,
            memuUrl: inpText.memuUrl,
            memuOrder: inpText.memuOrder,
            fatherID: inpText.fatherID,
            sonID: inpText.sonID
        })
    }
    const yyy = (e) => {
        console.log(e);
        setInpText({
            ID: inpText.ID,
            memuName: e.target.value,
            memuUrl: inpText.memuUrl,
            memuOrder: inpText.memuOrder,
            fatherID: inpText.fatherID,
            sonID: inpText.sonID
        })
    }

    // 点击修改后触发事件
    const showModify = (key) => {
        const newData = dataSource.filter((item) => item.key == key);
        setInpText({
            ID: newData[0].ID,
            memuName: newData[0].name,
            memuUrl: newData[0].address,
            memuOrder: newData[0].order,
            fatherID: newData[0].father,
            sonID: newData[0].son
        })
        console.log(newData);
        setmodifyAdd(true)
        setModalModify(true);
        setModalText({
            ID: "修改菜单ID",
            memuName: "修改菜单名称",
            memuUrl: "修改菜单地址",
            memuOrder: "修改菜单排序号",
            fatherID: "修改父模块ID",
            sonID: "修改子模块ID集合"
        })
    };

     // 新增菜单事件
    const showNweAdd = () => {
        setInpText({
            ID: "",
            memuName: "",
            memuUrl: "",
            memuOrder: "",
            fatherID: "",
            sonID: ""
        })
        setmodifyAdd(false)
        setModalModify(true);
        setModalText({
            ID: "新增菜单ID",
            memuName: "新增菜单名称",
            memuUrl: "新增菜单地址",
            memuOrder: "新增菜单排序号",
            fatherID: "新增父模块ID",
            sonID: "新增子模块ID集合"
        })
    }

    // 修改/新增表单点击确定后事件
    const handleOkModify = (key) => {
        if (modifyAdd) {
            console.log("修改事件");
            const newData = dataSource.filter((item) => item.key == key);
        } else {
            console.log("新增事件");
        }
        setConfirmLoading(true);
        setTimeout(() => {
            setModalModify(false);
            setConfirmLoading(false);
        }, 2000);
    };

    // 修改/新增表单点击取消后事件
    const handleCancel = () => {
        setModalModify(false);
    };

    // 删除菜单事件
    const showDeleteConfirm = (key) => {
        confirm({
            title: '请确认是否删除',
            icon: <ExclamationCircleOutlined />,
            okText: '删除',
            okType: 'danger',
            cancelText: '取消',
        
            onOk() {
                const newData = dataSource.filter((item) => item.key !== key);
                setDataSource(newData);
            },
        
            onCancel() {
                console.log('取消');
            },
        });
    };

    const columns = [
        {
            title: '菜单ID',
            dataIndex: 'ID',
            key: 'ID',
        },
        {
            title: '菜单名称',
            dataIndex: 'name',
            key: 'neme',
        },
        {
            title: '菜单地址',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '菜单排序号',
            dataIndex: 'order',
            key: 'order',
        },
        {
            title: '父模块ID',
            dataIndex: 'father',
            key: 'father',
        },
        {
            title: '子模块ID集合',
            dataIndex: 'son',
            key: 'son',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button type="text" style={{color: "#1890FF"}} onClick={()=>{showModify(record.key)}}>
                        修改
                    </Button>
                    { record.key===1 ? <Button type="text" danger disabled onClick={()=>{showDeleteConfirm(record.key)}}>
                        删除
                    </Button> : <Button type="text" danger onClick={()=>{showDeleteConfirm(record.key)}}>
                        删除
                    </Button> }
                </Space>
            ),
        },
    ];

    const [dataSource, setDataSource] = useState([
        {
            key: 1,
            ID: '这是ID,1',
            name: '这是菜单名称1',
            address: '这是菜单地址1',
            order: '这是菜单排序号1',
            father: '这是父模块ID1',
            son: '这是子模块ID集合1',
            children: [
                {
                    key: 101,
                    ID: '这是ID,11',
                    name: '这是菜单名称101',
                    address: '这是菜单地址101',
                    order: '这是菜单排序号101',
                    father: '这是父模块ID101',
                    son: '这是子模块ID集合101',
                },
                {
                    key: 102,
                    ID: '这是ID,12',
                    name: '这是菜单名称102',
                    address: '这是菜单地址102',
                    order: '这是菜单排序号102',
                    father: '这是父模块ID102',
                    son: '这是子模块ID集合102',
                },
            ]
        },
        {
            key: 2,
            ID: '这是ID,2',
            name: '这是菜单名称2',
            address: '这是菜单地址2',
            order: '这是菜单排序号2',
            father: '这是父模块ID2',
            son: '这是子模块ID集合2',
            children: [
                {
                    key: 201,
                    ID: '这是ID,21',
                    name: '这是菜单名称',
                    address: '这是菜单地址',
                    order: '这是菜单排序号',
                    father: '这是父模块ID',
                    son: '这是子模块ID集合',
                },
                {
                    key: 202,
                    ID: '这是ID,22',
                    name: '这是菜单名称',
                    address: '这是菜单地址',
                    order: '这是菜单排序号',
                    father: '这是父模块ID',
                    son: '这是子模块ID集合',
                },
            ]
        },
        {
            key: 3,
            ID: '这是ID,3',
            name: '这是菜单名称3',
            address: '这是菜单地址3',
            order: '这是菜单排序号3',
            father: '这是父模块ID3',
            son: '这是子模块ID集合3'
        },
    ]);

    const onFinish = (values) => {
        console.log('Success:', values);
      };
    
      const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
      };
    
    return (
        <div className="Menu">
            <div className='serach' style={{marginBottom: "30px"}}>
                <Input placeholder="请输入菜单名称" style={{width: "250px",marginRight: "20px"}} />
                <Button type="primary" icon={<SearchOutlined />} style={{marginRight: "20px"}}>
                    查询
                </Button>
                <Button type="primary" icon={<PlusSquareOutlined />} style={{backgroundColor: "#69C330",borderColor: "#69C330"}} onClick={showNweAdd}>
                    新增菜单
                </Button>
            </div>
            <div className='list'>
                <Table
                    columns={columns}
                    pagination={{
                        position: [top, bottom],
                    }}
                    dataSource={dataSource}
                />
                {/* 点击修改后的弹出框 */}
                <Modal
                    title="请修改内容"
                    visible={modalModify}
                    onOk={()=>{handleOkModify()}}
                    confirmLoading={confirmLoading}
                    onCancel={handleCancel}
                >
                    <div className='newAdd'>
                        <Input placeholder={modalText.ID} addonBefore={modalText.ID+"："} value={inpText.ID} onChange={xxx}/>
                    </div>
                    <div className='newAdd'>
                        <Input placeholder={modalText.memuName} addonBefore={modalText.memuName+"："} value={inpText.memuName} onChange={yyy}/>
                    </div>
                    <div className='newAdd'>
                        <Input placeholder={modalText.memuUrl} addonBefore={modalText.memuUrl+"："} value={inpText.memuUrl}/>
                    </div>
                    <div className='newAdd'>
                        <Input placeholder={modalText.memuOrder} addonBefore={modalText.memuOrder+"："} value={inpText.memuOrder} />
                    </div>
                    <div className='newAdd'>
                        <Input placeholder={modalText.fatherID} addonBefore={modalText.fatherID+"："} value={inpText.fatherID}/>
                    </div>
                    <div className='newAdd'>
                        <Input placeholder={modalText.sonID} addonBefore={modalText.sonID+"："} value={inpText.sonID}/>
                    </div>
                </Modal>
            </div>
        </div>
    )
}

export default Menu